<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><meta name="format-detection" content="telephone=no">
		<title>${obj.title}直播-心教育</title>
		<link rel="stylesheet" href="${root}css/seedsui.min.css">
		<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<script src="${root}js/jquery-2.1.3.js"></script>
		<script type="text/javascript" src="${root}js/player/cyberplayer.js"></script>
    <script src="${root}js/seedsui.min.js"></script>
    <style type="text/css">
    .jw-icon-barlogo-new{display: none;}
    </style>
<!--:if(!isEmpty(wxsign)){  -->
<script>  
wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: 'wx2787c3302c182d65', // 必填，公众号的唯一标识
    timestamp: ${wxsign.timestamp}, // 必填，生成签名的时间戳
    nonceStr: '${wxsign.nonceStr}', // 必填，生成签名的随机串
    signature: '${wxsign.signature}',// 必填，签名，见附录1
    jsApiList: ["onMenuShareTimeline",
                "onMenuShareAppMessage",
                "onMenuShareQQ",
                "onMenuShareWeibo",
                "onMenuShareQZone"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

wx.ready(function(){
	
	wx.onMenuShareTimeline({
	    title: '心教育-${obj.title}', // 分享标题
	    link: '${wxsign.url!}', // 分享链接
	    imgUrl: '${www}${obj.img}', // 分享图标
	    success: function () { 
	        // 用户确认分享后执行的回调函数
	    },
	    cancel: function () { 
	        // 用户取消分享后执行的回调函数
	    }
	});
	wx.onMenuShareAppMessage({
	    title: '心教育-${obj.title}', // 分享标题
	    desc: '心教育', // 分享描述
	    link: '${wxsign.url!}', // 分享链接
	    imgUrl: '${www}${obj.img}', // 分享图标
	    type: 'video', // 分享类型,music、video或link，不填默认为link
	    dataUrl: '${wxsign.url!}', // 如果type是music或video，则要提供数据链接，默认为空
	    success: function () { 
	        // 用户确认分享后执行的回调函数
	    },
	    cancel: function () { 
	        // 用户取消分享后执行的回调函数
	    }
	});
})

</script>  
<!--:}  -->

	</head>
	<body >
    	
	<article style="top:0px;">
    			<div id="player1" style="height: 220px;" controls="">
    			<a style="background-color: transparent;position: fixed;color: white;
    			z-index: 99;margin-top: 10px;" class="titlebar-button" href="javascript:back();">
    			<i class="icon icon-arrowleft"></i></a>
    			<!--:if(lubo==1){  -->
				    
<div id="playercontainer"></div>
<script type="text/javascript">
    var player = cyberplayer("playercontainer").setup({
    	width: "100%",
        height: "100%",
        file: "${obj.playinfo[0].PlayURL!obj.playinfo[1].PlayURL}", // 多码率m3u8播放地址
        autostart: true,
        stretching: "uniform",
        volume: 100,
        controls: true,
        skin: "five",
        //beelden, bekle, five, glow, roundster, seven, six, stormtrooper, vapor
        ak: "4c36094624e64e9c954467c917530798" // 公有云平台注册即可获得accessKey
    });
</script>
					<!--:}else{  -->
					<div id="playercontainer"></div>
<script type="text/javascript">
    var player = cyberplayer("playercontainer").setup({
        width: "100%",
        height: "100%",
        file: "rtmp://live.iepsy.com/zb/${obj.id!1}", // <—rtmp直播地址
        fallbackfile: "http://live.iepsy.com/zb/${obj.id!1}.m3u8", // <— 备用播放地址，为了电脑上用rtmp流播放，手机上播放设置hls流
        autostart: true,
        stretching: "uniform",
        volume: 100,
        controls: true,
        ak: "4c36094624e64e9c954467c917530798" // 公有云平台注册即可获得accessKey
    });
</script>
					<!--:}  -->
					
			    </div>
			    <ul class="list">
			    <li class="list-li underline">
                    <div class="list-container">
                        <p>${obj.title!}</p>
                        <small>&nbsp;</small><br/>
                        <small>7.1分&nbsp;
                        	讲师:${obj.teacher!}&nbsp;&nbsp;${obj.num,"#"}次播放
                        </small>
                    </div>
                    	<small class="jianjie">简介</small><i class="jianjie list-icon icon-arrowright"></i>
                </li>
                <li class="list-li ">
                    <small class="list-container">直播时间:${obj.start_time,"yyyy-MM-dd HH:mm"}
                    -${obj.end_time,"HH:mm"}</small>
                </li>
			    </ul>
			    
			  		
							
				</article>
				<article id="article2" >
				<ul class="chat" id="ID-Chats" style="">
                
            </ul>
					</article>	
				<footer >
				<!--:include("/inc/zb/zb/footer.html"){}  -->
				</footer>
		<div id="ID-Dialog-Mid" class="dialog-middle" style="width: 320px;left: 1%;">
		<div class="card" style="padding:10px 12px;">
    		<p class="" style="padding: 0 0 6px 0;">${obj.text!}</p>
    	</div>
		</div>
				
		
    <!--Exmobi能力-->
    

		<script type="text/javascript">
		var ws;
		var WS_URL =  'www.iepsy.com' + "/websocket"
		
		if (location.protocol == 'http:') {
			ws = new WebSocket("ws://"+WS_URL);
		} else { // 如果页面是https,那么必须走wss协议
			ws = new WebSocket("wss://"+WS_URL);
		}
		ws.onmessage = function(event) {
			 var re = JSON.parse(event.data);
		    if (re.room == "zb${obj.id}") {//一个房间
		    	$(".chat").append("<li>\n" +
						"                    <div class=\"chat-photo\">\n" +
						"                        <div class=\"photo size40\" style=\"border-radius:100%\">\n" +
						"                            <i class=\"icon icon-user-fill\"></i>\n" +
						"                        </div>\n" +
						"                    </div>\n" +
						"                    <div class=\"chat-content-box\">\n" +
						"                        <div class=\"chat-content\">\n" +
						"                            <span class=\"chat-content-author\">"+re.nickname+":"+getdate()+"</span>\n" +
						"<p>"+Emoji.parse(re.msg)+"</p>"+
						"                        </div>\n" +
						"                    </div>\n" +
						"                </li>")
				var len=$('.chat').children().length;
				if(len>3){
				$(".chat").find("li")[0].remove();
				}

		    }
			
		};
		
		
		var slider=null;
        var richinput=new Richinput("#ID-RichInput",{
            onActive:function(){
                if(!slider)slider=new Slider("#ID-RichInput-slider",{
                    pagination:".slider-pagination"
                });
            }
        });
        var richContainer=richinput.container;
        var textarea=document.querySelector("#ID-RichInput textarea");
        var toast=new Toast({html:"输入内容不能为空"});
        var formControls=new FormControls();
        var chatContainer=document.getElementById("ID-Chats");
        ws.onopen = function(event) {
		    // 加入home房间
			ws.send(JSON.stringify({room:'zb${obj.id}',"action":"join"}));
		   
			var html=("<li>\n" +
					"                    <div class=\"chat-photo\">\n" +
					"                        <div class=\"photo size40\" style=\"border-radius:100%\">\n" +
					"                            <i class=\"icon icon-user-fill\"></i>\n" +
					"                        </div>\n" +
					"                    </div>\n" +
					"                    <div class=\"chat-content-box\">\n" +
					"                        <div class=\"chat-content\">\n" +
					"                            <span class=\"chat-content-author\">${session.user.nickname!}加入了房间</span>\n" +
					"                        </div>\n" +
					"                    </div>\n" +
					"                </li>")
			chatContainer.innerHTML=chatContainer.innerHTML+html;
			var len=$('.chat').children().length;
			if(len>3){
			$(".chat").find("li")[0].remove();
			}
		};
        //发送消息
        function sent(){
            if(textarea.value==""){
                toast.show();
                return;
            }
            richContainer.classList.remove("active");
            var html='<li class="even">'+
                '<div class="chat-photo">'+
                    '<div class="photo size40" style="border-radius:100%"><i class="icon icon-user-fill"></i></div>'+
                '</div>'+
                '<div class="chat-content-box">'+
				"   <span class=\"chat-content-author\">${session.user.nickname!}</span>\n" +
                    '<div class="chat-content">'+
                        '<p>'+Emoji.parse(textarea.value)+'</p>'+
                    '</div>'+
                '</div>'+
            '</li>';
            $.get("http://www.iepsy.com/json/zb/websocket",{room:'zb${obj.id}',action:'join',msg:Emoji.parse(textarea.value),nickname:'${session.user.nickname!"匿名用户"}'})

            //chatContainer.innerHTML=html+chatContainer.innerHTML;
            textarea.value="";
            scrollToBottom();
        }
        //动画滚动至底部
        var scrollbox=document.getElementById("article2");
        var scrollboxHeight=scrollbox.clientHeight;
        function scrollToBottom(){
            scrollbox.scrollTop+=10;
            if(scrollbox.scrollTop+scrollboxHeight<scrollbox.scrollHeight){
                requestAnimationFrame(scrollToBottom);
            }
        }
    function back(){
    	if(history.length>0){
    		location.href="${root}zb/"
    	}else{
    		history.go(-1);
    	}
    	
    	}
    
    function getdate() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        var minutes=date.getMinutes();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        if (minutes >= 0 && minutes <= 9) {
        	minutes = "0" + minutes;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                + " " + date.getHours() + seperator2 + minutes
                + seperator2 + date.getSeconds();
        return currentdate;
    }
    var dialogMid=new Dialog({
		wrapper:"#ID-Dialog-Mid",
		overflowContainer:null,
		position:"middle",
		onClick:function(e){console.log(e.target)},
		onShowed:function(e){
			console.log("显示");
		},
	});
    
    $(function(){
    	$(".jianjie").click(function(){
    		dialogMid.show();
    	})
    })
    
</script>
	</body>
</html>